// 画布自适应
import { useEffect } from 'react';

import './App.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
function App() {
  useEffect(() => {
    // 1、创建场景
    const sence = new THREE.Scene();

    //2、创建相机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    //3、创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 4、创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    parentMaterial.wireframe = true; //设置父元素材质为线框模式
    const parentCube = new THREE.Mesh(geometry, parentMaterial); // ---父元素
    parentCube.add(cube);
    // 位置设置position
    parentCube.position.set(0, 0, 0);
    cube.position.set(3, 3, 0);
    // 缩放设置scale
    parentCube.scale.set(1, 1, 1);
    // 旋转rotation（绕轴旋转）
    parentCube.rotation.x = Math.PI / 8;

    // 5、将网格添加到场景
    sence.add(parentCube);

    // 6、设置相机位置
    camera.position.z = 5;
    camera.position.x = 3;
    camera.position.y = 2;
    camera.lookAt(0, 0, 0);

    // 添加世界坐标辅助器与轨道控制器
    const axesHelper = new THREE.AxesHelper(5);
    sence.add(axesHelper);
    const controls = new OrbitControls(camera, renderer.domElement);
    // controls.autoRotate = true;
    controls.dampingFactor = 0.5;
    //7、渲染
    function animate() {
      controls.update();
      requestAnimationFrame(animate);
      // cube.rotation.x += 0.01;
      // cube.rotation.y += 0.01;
      renderer.render(sence, camera);
    }
    animate();
    // 画布自适应
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    });

    // ------------------使用lil-GUI设置立方体效果------------------
    // 1、gui设置全屏
    let eventObj = {
      Fullscreen: function () {
        document.body.requestFullscreen();
      },
      Exitscreen: function () {
        document.exitFullscreen();
      },
    };
    const gui = new GUI(); // 创建GUI对象
    gui.add(eventObj, 'Fullscreen').name('全屏'); // 添加按钮(对象，属性)，.name修改属性名称
    gui.add(eventObj, 'Exitscreen'); // 添加按钮

    //2、GUI控制立方体位置
    let folder = gui.addFolder('立方体位置'); // xyz三个按钮添加到一个分组
    folder
      .add(cube.position, 'x')
      .min(-5)
      .max(10)
      .step(1)
      .name('立方体x轴位置')
      .onChange((val) => {
        console.log('立方体x轴位置', val);
      })
      .onFinishChange((val) => {
        console.log('立方体x轴位置', val);
      }); // 立方体在x轴最小位置-5，最大10，滑动步长1
    folder
      .add(cube.position, 'y')
      .min(-5)
      .max(10)
      .step(1)
      .name('立方体y轴位置'); // 立方体在y轴最小位置-5，最大10，滑动步长1
    folder
      .add(cube.position, 'z')
      .min(-5)
      .max(10)
      .step(1)
      .name('立方体z轴位置'); // 立方体在z轴最小位置-5，最大10，滑动步长1
    //3、 GUI控制元素线框材质
    gui.add(parentMaterial, 'wireframe').name('父元素线框模式');
    // 4、gui控制立方体颜色

    let colorParms = {
      cubeColor: '#ff0000',
    };
    gui
      .addColor(colorParms, 'cubeColor')
      .name('立方体颜色')
      .onChange((val) => {
        cube.material.color.set(val);
      });
  }, []);

  return <div></div>;
}

export default App;
